<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      empty-view-text="暂时还没有数据咯~"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar
          height="50"
          title="账户余额"
          title-size="36"
          back-icon-color="#333"
          title-color="#333"
        ></u-navbar>
        <view
          class="moneyView"
          :style="{
            backgroundImage: `url(${getImageUrl('wallat-bg.png')})`
          }"
        >
          <view class="moneyTitle dis-flex flex-y-between">
            <text class="title-lef">账户余额</text>
            <view class="dis-flex flex-y-center" @click="ruleShow = true">
              <text class="title-rig">收益规则</text>
              <u-icon name="/static/tishi.png" style="margin-left: 10rpx" size="28"></u-icon>
            </view>
          </view>
          <view class="postView dis-flex flex-y-between">
            <view class="dis-flex flex-y-center">
              <text class="balance">{{ (balance * 0.01).toFixed(2) }}</text>
              <text style="font-size: 36rpx">元</text>
            </view>
            <view class="bt dis-flex flex-y-center" @click="totixian()">
              <view class="fuhao">¥</view>
              <view>提现</view>
              <u-icon name="/static/right.png" size="26"></u-icon>
            </view>
          </view>
        </view>
        <u-gap height="20"></u-gap>
      </view>

      <view class="" style="padding: 20rpx; padding-top: 0">
        <view style="background-color: #fff; border-radius: 10rpx">
          <view class="headView list-title dis-flex flex-y-between">
            <view class="title-1">余额明细</view>
            <view class="title-2" @click="shaixuanShow = true">
              <text>筛选</text>
              <u-icon style="margin-left: 10rpx" name="arrow-down" size="28"></u-icon>
            </view>
          </view>
          <view class="itemView" v-for="(item, index) in itemList" :key="index">
            <view class="itemHead">
              <view class="itemTitle">{{ item.title }}</view>
              <view class="itemMoney" v-if="item.price > 0"
                >+ ¥{{ (item.price * 0.01).toFixed(2) }}</view
              >
              <view class="itemMoney itemMoney-1" v-if="item.price < 0"
                >- ¥{{ (-item.price * 0.01).toFixed(2) }}</view
              >
            </view>
            <view class="itemTime">
              <view>{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <!-- 		<u-popup v-model="ruleShow" border-radius="20" mode='center' width="600rpx" height="auto">
			<view class="pos-fixed rule-warpper">
				<view class="title">规则说明</view>
				<view class="content">
					<u-parse :html="content"></u-parse>
				</view>
				<view class="colse-bt" @click="ruleShow = false">知道了</view>
			</view>
		</u-popup> -->
    <u-popup v-model="ruleShow" border-radius="20" mode="center" width="600rpx" height="auto">
      <view class="pos-fixed rule-warpper">
        <view class="title">规则说明</view>
        <scroll-view scroll-y="true" style="min-height: 300rpx; max-height: 690rpx">
          <view class="content">
            <u-parse :html="ruleDetail" />
          </view>
        </scroll-view>
        <view class="colse-bt" @click="ruleShow = false">知道了</view>
      </view>
    </u-popup>
    <u-popup v-model="shaixuanShow" mode="top" height="auto">
      <view
        class="tab-wrapper"
        :style="{
          height: `${285 + statusBarHeight + navbarHeight}px`,
          paddingTop: `${statusBarHeight + navbarHeight}px`
        }"
      >
        <view class="tab-title"> 快捷筛选 </view>
        <view class="tsbs-list">
          <view
            class="tab-item"
            @click="tabIndex = index"
            :class="tabIndex == index ? 'checked' : ''"
            v-for="(tab, index) in tabs"
            :key="index"
          >
            {{ tab.name }}
            <u-icon
              class="checkedIcon"
              name="/static/checked.png"
              size="28"
              v-if="tabIndex == index"
            ></u-icon>
          </view>
        </view>
        <view class="btn-wrapper dis-flex">
          <view class="btn-reset" @click="resetTab()">重置</view>
          <view class="btn-submit" @click="onSubTab()">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      tabs: [],
      tabIndex: null,
      ruleShow: false,
      shaixuanShow: false,
      content: '',
      imgStyle: {
        width: '12rem'
      },
      balance: '',
      itemList: [],
      statusBarHeight: systemInfo.statusBarHeight,
      ruleDetail: ''
    }
  },
  onLoad() {
    this.$u.get('/app-api/pay/wallet/get').then((res) => {
      this.balance = res.data.balance
    })
    this.$u.get('/app-api/cms/agreement/get-content', { identify: 'wallet_rule' }).then((res) => {
      this.ruleDetail = res.data
    })
    this.$u.get('/app-api/pay/wallet-transaction/get-biz-types').then((res) => {
      this.tabs = res.data
    })
    this.queryList(1, 10)
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 44
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      this.$u
        .get('/app-api/pay/wallet-transaction/page', {
          pageNo,
          pageSize,
          type: this.tabIndex != null ? this.tabs[this.tabIndex].value : ''
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
    },
    totixian() {
      this.$u.route('/other/withdrawal/withdrawal')
    },
    onSubTab() {
      const app = this
      app.shaixuanShow = false
      app.queryList(1)
    },
    resetTab() {
      const app = this
      app.shaixuanShow = false
      app.tabIndex = null
      app.queryList(1)
    },
    onWithdrawal() {
      this.$utils.route('/app-api/pay/wallet-transaction/page').then((res) => {
        this.$refs.paging.complete(this.itemList)
      })
    }
  }
}
</script>

<style lang="scss">
/* @import url('my-wallet.css'); */

page {
  background: #f0f1f2;
}

.moneyView {
  height: 200rpx;
  box-shadow: 0px 4rpx 10rpx 0px rgba(219, 219, 219, 0.42);
  // border-radius: 16rpx;/
  margin: 20rpx 20rpx 0 20rpx;
  padding: 47rpx 20rpx 47rpx 36rpx;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.moneyTitle {
  font-size: 28rpx;
  font-weight: 400;
  margin-bottom: 20rpx;
  overflow: auto;
}

.title-lef {
  float: left;
  font-size: 24rpx;
}

.title-rig {
  font-size: 24rpx;
}

.postView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.balance {
  font-size: 48rpx;
  font-weight: 600;
}

.integral-btn {
  display: inline-block;
  padding: 8rpx 20rpx;
  color: #fff;
  font-size: 33rpx;
  border-radius: 35rpx;
  margin-right: 10rpx;
}

.withdrawal {
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background: #fdea11;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #b65a00;
  margin-left: 40rpx;
}

.tabView {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 0px;
}

.itemView {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  border-bottom: 1px solid #ededed;
}

.itemHead {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #121212;
}

.itemTitle {
  flex: 1;
}

.itemTime {
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 15rpx;
}

.rule-warpper {
  background: white;
  padding: 30rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  height: auto;
  border-radius: 20rpx;

  .title {
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
    margin: 20rpx 0;
  }

  .content {
    margin: 30rpx 0 57rpx 0;
  }

  .colse-bt {
    width: 240rpx;
    height: 72rpx;
    background: #10a28f;
    border-radius: 36rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
}

.itemMoney {
  font-weight: 600;
  font-size: 30rpx;
  color: orange;
}

.itemMoney-1 {
  font-weight: 600;
  font-size: 30rpx;
  color: green;
}

.bt {
  font-size: 32rpx;
  width: 163rpx;
  height: 52rpx;
  opacity: 0.9;
  background-color: #81ccbf;
  position: relative;
  right: -20rpx;
  border-radius: 26rpx 0 0 26rpx;

  // justify-content: space-around;
  .fuhao {
    height: 50rpx;
    width: 50rpx;
    background-color: #10a28f;
    border-radius: 50%;
    text-align: center;
    line-height: 50rpx;
    font-weight: 600;
    margin-left: 1rpx;
    margin-right: 10rpx;
  }
}

.rule-warpper {
  background: white;
  padding: 30rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  height: auto;
  border-radius: 20rpx;

  .title {
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
    margin: 20rpx 0;
  }

  .content {
    margin: 30rpx 0 57rpx 0;
  }

  .colse-bt {
    width: 240rpx;
    height: 72rpx;
    background: #10a28f;
    border-radius: 36rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
}

.list-title {
  padding: 20rpx;
  font-size: 32rpx;
  color: #999999;
  .title-2 {
    color: #333333;
    font-size: 30rpx;
  }
}
.tab-wrapper {
  position: relative;
}

.tab-title {
  font-size: 30rpx;
  color: #333333;
  padding: 20rpx;
}
.tsbs-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;
  .tab-item {
    height: 60rpx;
    line-height: 60rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    padding: 0 30rpx;
    text-align: center;
    margin-right: 20rpx;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #666666;
    position: relative;
    min-width: 160rpx;
  }
  .checked {
    background: #d7f5f1;
    color: #10a28f;
  }
  .checkedIcon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.btn-wrapper {
  position: absolute;
  bottom: 0;
  height: 127rpx;
  border-top: 1rpx solid #e6e6e6;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .btn-submit {
    width: 320rpx;
    height: 70rpx;
    background: #10a28f;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28rpx;
    border: none;
  }

  .btn-reset {
    width: 320rpx;
    height: 70rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    border: none;
  }
}
.headView {
  display: flex;
  align-items: center;
  position: sticky;
  background: #fff;
  z-index: 100;
  // height: 100rpx;
  top: 0px;
  padding-right: 20rpx;
  border-bottom: 1rpx solid #ededed;
}
</style>
